<template>
  <div class="look">
   	<div class="head">穿搭</div>
   	<div class="section">
   		<div class="section-a">出游穿搭攻略都在这里</div>
   		<div class="section-b">
   			<div class="section-left">
   				<img src="../../static/img/1.png"/>
   			</div>
   			<div class="section-right">
   				<img src="../../static/img/2.png"/>
   			</div>
   		</div>
   		<div class="section-a">夏日百搭款￥29起价</div>
   		<div class="section-c">
   			<div class="section-d">
   				<img src="../../static/img/3.png"/>
   			</div>
   		</div>
   		<div class="section-a">2018春夏印花T恤系列</div>
   		<div class="section-c">
   			<div class="section-o">
   				<img src="../../static/img/4.png"/>
   			</div>
   			<div class="section-h">
   					<div class="top">
   						<img src="../../static/img/5.png"/>
   					</div>
   					<div class="bottom">
   						<img src="../../static/img/6.png"/>
   					</div>
   			</div>
   			<div class="section-g">
   					<img src="../../static/img/7.png"/>
   			</div>
   		</div>
   	</div>
  </div>
</template>

<script>

export default {
  name: 'look',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.look{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

	}
.head{
	width: 100%;
	height: 1rem;
	background: #ffffff;
	text-align: center;
	line-height: 1rem;
	border-bottom: 0.02rem solid #f3f3f3;
	font-size: 0.22rem;
	position: fixed;
	top: 0;
	left: 0;

}
.section{
	flex: 1;
	/*background:pink;*/
	color: #969696;
	margin-top: 1rem;
	overflow: scroll;

}
.section-a{
	width: 100%;
	height: 1rem;
	/*background: red;*/
	line-height: 1rem;
	padding-left: 0.5rem;
	box-sizing: border-box;
}
.section-b{
	width: 100%;
	height: 3rem;
	display: flex;
}
.section-left{
	width: 47%;
	height: 100%;
	margin-left: 0.12rem;
	margin-right: 0.15rem;
}
.section-left img{
	width: 100%;
}
.section-right{
	width: 47%;
	height: 100%;
}
.section-right img{
	width: 100%;
}
.section-c{
	width: 100%;
	height: 3rem;
	display: flex;
}
.section-d{
	width: 100%;
	height: 100%;
	margin-left: 3%;
	margin-right: 3%;
}
.section-d img{
	width: 100%;
}
.section-o{
	width: 48%;
	margin-left: 3%;

}

.section-o img{
	width: 100%;
}
.section-h{
	width: 25%;
	margin-left: 1%;
	/*background: red;*/
	display: flex;
	flex-direction: column;
}
.top{
	width: 100%;
	height: 50%;
	/*background: gray;*/
}
.top img{
	width: 100%;
	height: 100%;
}
.bottom{
	width: 100%;
	height:47%;
	margin-top: 0.04rem;
	/*background: pink;*/
}
.bottom img{
	width: 100%;
	height: 100%;
}
.section-g{
	width: 25%;
	margin-left: 1%;
	margin-right: 4%;
	/*background: gray;*/
}
.section-g img{
	width: 100%;
}
</style>
